<template>
  <px-dialog v-model="visible" width="75%" @close="closeDialog">
    <px-scrollbar>
      <div v-show="isDone" class="add-inspect-plan-content">
        <px-form
          ref="formRef"
          :inline="false"
          :rules="rules"
          :model="formValue"
          label-position="right"
          label-width="150px"
          :validate-on-rule-change="false"
          class="add-inspect-plan-content-form"
        >
          <ExecutionCycle :isEdit="true" :form-value="formValue" @change="handelExecutionCycleChange" />
        </px-form>
      </div>
    </px-scrollbar>

    <template #footer>
      <span class="dialog-footer">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="confirm(formRef)">确定</px-button>
      </span>
    </template>
  </px-dialog>
</template>
<script setup lang="ts">
import { cloneDeep } from "@pureadmin/utils";
import { ExecutionCycle } from "../../components/index";
import { updateInspectPlan, getByPlanNo } from "@/api/erc/inspectPlan";

import { reactive, ref, watch } from "vue";

const isDone = ref(false);
const emits = defineEmits(["close"]);
//form表单相关
const formRef = ref();
type FormValue = {
  id: string;
  planNo: string;
  execType: string | number;
  execStartDate: string;
  execEndDate: string;
  execDuration: number;
  execDurationUnit: string;
  extendDuration: number;
  extendDurationUnit: string;
  taskCreateTime: string;
  cyclePerNum: number;
  cyclePerUnit: string;
  cycleValue: string;
  cycleTime: string;
  createTaskImmediately: number;
};
const formDataTmpl = {
  id: "",
  planNo: "",
  execType: "1", //执行方式 1-固定时间,2-周期时间
  execStartDate: "",
  execEndDate: "",
  execDuration: 0,
  execDurationUnit: "",
  extendDuration: 0,
  extendDurationUnit: "",
  cyclePerNum: 0,
  cyclePerUnit: "DAY",
  cycleValue: "",
  cycleTime: "",
  taskCreateTime: "",
  createTaskImmediately: 0
};

const formValue = ref<FormValue>(cloneDeep(formDataTmpl));
const visible = defineModel("visible");
const planNo = defineModel("planNo");
const rules = reactive({
  execType: [
    //需要自定义规则
    {
      required: true,
      message: "请选择执行方式",
      trigger: "change"
    }
  ],
  execStartDate: [
    //需要自定义规则
    {
      required: true,
      message: "请选择开始时间",
      trigger: "change"
    }
  ],
  execEndDate: [
    //需要自定义规则
    {
      required: true,
      message: "请选择结束时间",
      trigger: "change"
    }
  ],
  execDuration: [
    {
      required: true,
      message: "请选择执行时长",
      trigger: "blur"
    }
  ],
  taskCreateTime: [
    {
      required: true,
      message: "请选择任务生成并提醒时间",
      trigger: "change"
    }
  ]
});
watch(
  () => visible.value,
  async val => {
    if (val) {
      let detail = await getByPlanNo({ planNo: planNo.value });
      formValue.value = mergeAndCloneObjects(formValue.value, detail);
      formValue.value.execType = String(formValue.value.execType);
      isDone.value = true;
    }
  }
);
function reset() {
  formRef?.value.clearValidate();
  formValue.value = cloneDeep(formDataTmpl);
  isDone.value = false;
  planNo.value = "";
}
function closeDialog() {
  visible.value = false;
  emits("close");
  reset();
}
async function confirm(formEl) {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      formValue.value.execType = Number(formValue.value.execType);
      await updateInspectPlan(formValue.value);
      closeDialog();
    } else {
    }
  });
}
const handelExecutionCycleChange = val => {
  Object.assign(formValue.value, val);
};
function mergeAndCloneObjects(obj1, obj2) {
  const newObj = {};

  for (let key in obj1) {
    if (obj2.hasOwnProperty(key)) {
      newObj[key] = obj2[key];
    }
  }

  return cloneDeep(newObj);
}
</script>
<style lang="scss" scoped>
.add-inspect-plan-content {
  display: block;
  width: 100%;
  min-height: 150px;

  &-form {
    min-width: 1150px;
    max-width: 1500px;
  }

  :deep(.px-form) {
    width: 95%;

    .px-form-item {
      width: 100%;
      margin-right: 0;

      .px-input {
        width: 100%;
      }

      .px-select {
        width: 100%;
      }

      .px-select-v2 {
        width: 100%;
      }

      .px-input-number {
        width: 100%;

        .px-input__inner {
          text-align: left;
        }
      }

      &.is-error {
        .px-input-number {
          .px-input__wrapper {
            border: 1px solid var(--px-color-danger);
            box-shadow: none;
          }
        }
      }
    }
  }

  .equip-table {
    --px-table-border-color: #dfdfdf;

    margin-bottom: 18px;
    font-size: 14px;

    :deep(.px-table__header) {
      thead {
        tr {
          background-color: #e7eefb !important;

          th {
            font-size: 14px;
            font-weight: bold;
            color: #000;
            background-color: #e7eefb !important;
          }
        }
      }
    }

    :deep(.px-input-number) {
      width: 100%;
    }
  }
}
</style>
